{% extends 'home/public/base.html' %}


{% block css %}
<link rel="stylesheet" type="text/css" href="/static/home/css/cart.css">
<link rel="stylesheet" type="text/css" href="/static/home/css/cart-app.css">

{% endblock %}

{% block con %}
<div class="navbar-left" style="position: absolute;top:25px;left: 300px;z-index: 99999;">
    <ol class="breadcrumb">
        <li class="active">购物车</li>
        <li>确认订单</li>
        <li>在线支付</li>
        <li>完成 </li>
    </ol>
</div>

<div class="mainbody cart" style="padding-top: 80px;">
        <div class="container">
            <!-- 购物车详情头 -->
            <table class="cart-header">
                <tbody>
                    <tr>
                        <td class="cart-col-select col-md-3 col-xs-3 col-sm-3">
                            <div class="cart-select-all JSelectAll">
                                <!-- <div class="mz-checkbox"></div> -->
                                <!-- <span class="cart-select-title">全选</span> -->
                            </div>
                        </td>
                        <td class="cart-col-name col-md-3 hidden-xs hidden-sm">商品</td>
                        <td class="cart-col-price col-md-2 hidden-xs hidden-sm">单价(元)</td>
                        <td class="cart-col-number col-md-2 hidden-xs hidden-sm">数量</td>
                        <td class="cart-col-total col-md-1 hidden-xs hidden-sm">小计(元)</td>
                        <td class="cart-col-ctrl col-md-1 hidden-xs hidden-sm">操作</td>
                    </tr>
                </tbody>
            </table><!-- 购物车详情头 E-->
            
            <!-- 购物清单信息列表 -->
            <div class="cart-merchant-list">
                <div class="cart-merchant">
                    <table class="cart-merchant-body">
                        <tbody>
                        {% for v in cartlist %}
                            <tr class="cart-product">
                                <td class="cart-col-select col-md-3 col-xs-4 col-sm-4 tongji">  
                                    <div class="mz-checkbox " cid="{{ v.id }}"></div> 
                                    <a href="meilanx.html" class="cart-product-link" target="_blank">
                                        <img src="{{ v.gid.pic }}" class="cart-product-img" alt="魅蓝 X">
                                    </a>
                                </td>
                                <td class="cart-col-name col-md-3 col-xs-8 col-sm-8">
                                    <a href="{% url 'myhome_goods' v.gid.id %}" class="cart-product-link" target="_blank">
                                      <p>{{ v.gid.title }}</p>
                                     
                                    </a>
                                 
                                    
                                </td>
                                <td class="cart-col-price col-md-2 hidden-xs hidden-sm">
                                    <p>
                                        <span class="cart-product-price">{{ v.gid.price }}</span>
                                    </p>
                                </td>
                                <td class="cart-col-number col-md-2 hidden-xs hidden-sm">
                                    <div class="cart-product-number-adder ziji">
                                        <p class="cart-product-number-max show"></p>
                                        <div class="mz-adder" sid="{{ v.gid.id }}">
                                            <button class="mz-adder-subtract"></button>
                                            <div class="mz-adder-num"><input name="num" class="mz-adder-input" value="{{ v.num }}" type="text"></div>
                                            <button class="mz-adder-add"></button>
                                        </div>
                                    </div>
                                </td>
                                {% load pagetag %}
                                <td class="cart-col-total col-md-1 hidden-xs hidden-sm">
                                    <span class="cart-product-price total">{% cheng v.num v.gid.price %}</span>
                                </td>
                                <td class="cart-col-ctrl col-md-1 hidden-xs hidden-sm">
                                    <div class="cart-product-removes">
                                        <span class="glyphicon glyphicon-remove"></span>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                      
                        </tbody>
                    </table>
                </div>
            </div><!-- 购物清单信息列表 E-->
        </div>
        <!-- 结算详情 -->
        <div class="cart-footer" id="cartFooter">
            <div class="container">
               <div class="cart-footer-left col-md-6 col-xs-4 col-sm-4">
                   <div class="cart-select-all JSelectAll" data-mdesc="全选按钮" data-mtype="store_cart_all">
                        <div class="mz-checkbox"></div>
                        <span class="cart-select-title">全选</span>
                   </div>
                   <!-- <span class="cart-remove-selected" id="removeSelected">删除选中的商品</span> -->
                   <span class="cart-footer-count">
                        共
                        <span class="cart-footer-num" id="totalCount">0</span>
                        件商品
                   </span>
                </div>
                <div class="cart-footer-right col-md-5 col-md-offset-1 col-sm-offset-2 col-xs-8 col-sm-6">
                    <span class="cart-footer-sum">
                        <span class="cart-footer-text">已优惠</span>
                        <span class="cart-footer-num red" id="totalDiscount">0.00</span>
                        <span class="cart-footer-text">元， 合计(不含运费)：</span>
                        <span class="cart-footer-total" id="totalPrice">0.00</span>
                    </span>
                    <form action="{% url 'myhome_confirmorder' %}" style="display:inline-block" method="get">
                        
                        <input type="hidden" name="ids" value="">
                        <button class="mz-btn success" id="cartSubmit">去结算</button>
                    </form>
                </div>
            </div>
        </div><!-- 结算详情 E-->
    </div>
<script type="text/javascript">

//订单结算的提交事件
$('#cartSubmit').click(function(){

    // 调用获取总价和id方法
    ids = Total()
    // 判断是否选择了商品提交
    if(ids.length == 0){
        alert("请先选择购买的商品")
        return false;
    }
    // 数组转json
    res = JSON.stringify(ids);
    // 把已选择商品id加入到表单中
    $('input[name=ids]').val(res)
    

})




// 购物车 选框的js事件
allSelect()
function allSelect(){
    var aee = false;
    var see = false;
    // 全选
    $('.JSelectAll .mz-checkbox').click(function(){
        if(aee==false){
          $(this).addClass('checked');
          $('.cart-col-select .mz-checkbox').addClass('checked');
          aee = true;
        }else if(aee==true){
          $(this).removeClass('checked');
          $('.cart-col-select .mz-checkbox').removeClass('checked');
          aee = false;
        }
        Total()
    })

    //单选
    $('.cart-col-select .mz-checkbox').click(function(){
        if(see==false){
          $(this).addClass('checked');
          see = true;
        }else if(see==true){
          $(this).removeClass('checked');
          see = false;
        }
        Total()
    })
    
}

// 计算总价,和选择的商品数量
function Total(){
    // 获取选中的元素中的购买数量
    var num = 0
    var totalnum = 0
    var ids = []
    // 找到选中的元素
    $('.cart-merchant-body .checked').each(function(){
        num += Number($(this).parents('tr').find('input[name=num]').val())
        totalnum += Number($(this).parents('tr').find('.total').html())
        ids.push(Number($(this).attr('cid')))
    })
    // 把计算出的选中的商品数量 更新
    $('#totalCount').html(num)
    // 把计算的总价 更新
    $('#totalPrice').html(totalnum)

    return ids

}
// 数量加减事件
$('.mz-adder button').click(function(){
    // 获取当前的数量, 加减,更新数量
    var num = Number($(this).parent().find('input[name=num]').val())
    // 获取当前元素的class
    var cls = $(this).attr('class')
    if(cls == 'mz-adder-subtract'){
        num -= 1;
    }else if(cls == 'mz-adder-add'){
        num += 1;
    }
    if( num <= 1){
        num = 1
    }
    // 更新
    $(this).parent().find('input[name=num]').val(num)
     changenum(num,$(this))
})

// 给数量绑定一个 change事件
$('.mz-adder-num input[name=num]').change(function(){
    changenum($(this).val(),$(this))
})
// 发送ajax请求,修改数据库的商品购买数量
function changenum(num,res){
    // 获取商品id
    gid = res.parents('.mz-adder').attr('sid')
    // 发送ajax请求,修改数据库的商品购买数量
    $.get('{% url "myhome_cartedit" %}',{'gid':gid,'num':num},function(data){
        // 弹出提醒信息
        alert(data['msg'])
        // 判断是否成功
        if(data['code'] == 0){
            // 成功后,则刷新页面
            location.href = location.href
        }
    },'json')
}


//删除键绑定单击事件
$('.cart-product-removes').click(function(){
    // 获取该id
    kid = $(this).parents('tr').find('.mz-checkbox').attr('cid')
    // 发送ajax请求删除商品
    $.get('{% url "myhome_cartdel" %}',{'kid':kid},function(data){
        location.href = location.href
    },'json')

    
})
</script>
{% endblock %}